<template>
  <div class="recharge_title">{{$t('Stored_record')}}</div>
  <div class="recharge_content">
    <div class="title">
      <span class="flex-list">{{$t('order_number')}}</span>
      <span class="flex-list">{{$t('order_time')}}</span>
      <span class="flex-list">{{$t('recharge_money')}}</span>
    </div>
    <div class="main">
      <div class="main_line" v-for="item in game_list" :key="item.id">
        <span class="flex-list">{{ item.order_num }}</span>
        <span class="flex-list">{{ item.created_at }}</span>
        <span class="flex-list">{{item.currencyCode == 'TWD' ? 'NT$' : '$'}}{{ item.order_money }}</span>
      </div>
      <p v-show="game_list.length == 0 && is_show" style="text-align: center;padding: 20px;color: #6c6c6c;">{{$t('no_record')}}</p>
      <el-pagination 
          v-if="game_list.length > 0"
          class="pagination"
          background 
          layout="prev, pager, next" 
          :total="totalRecords" 
          :page-size="currentPage.limit" 
          :current-page="currentPage.page" 
          @current-change="handlePageChange" 
      />
    </div>
  </div>

  <div v-if="visible" class="modal-overlay">
    <div class="modal">
      <div class="modal-header">
        <h3>{{$t('Verify_code')}}</h3>
      </div>
      <div class="modal-body">
        <!-- <label for="password">支付密码</label> -->
        <input
          type="password"
          v-model="password"
          id="password"
          :placeholder="$t('enter_code')"
          maxlength="6"
        />
      </div>
      <div class="modal-footer">
        <p class="confirm-button" @click="$router.go(-1)">{{$t('cancellation')}}</p>
        <p class="confirm-button" @click="handleSubmit">{{$t('confirm')}}</p>
      </div>
    </div>
  </div>

  <div v-if="visible_setPwd" class="modal-setPwd">
    <div class="modal">
      <div class="modal-header">
        <h3>{{$t('set_code')}}</h3>
        <p>{{$t('re_tip')}}</p>
      </div>
      <div class="modal-body">
        <!-- <label for="password">支付密码</label> -->
        <input
          type="password"
          v-model="set_password"
          id="password"
          :placeholder="$t('enter_code')"
          maxlength="6"
        />
      </div>
      <div class="modal-footer">
        <p class="confirm-button" @click="handleClose_pwd">{{$t('cancellation')}}</p>
        <p class="confirm-button" @click="handleSubmit_setPWd">{{$t('confirm')}}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "@/utils/api";
import { useUserInfoStore } from "@/store/modules/user_info/index";
import { reactive,ref,watchEffect } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const user_infoStore = useUserInfoStore();
const user_info = user_infoStore.userInfo;
const userid = user_info.id;

const game_list = ref([]);
const currentPage = reactive({ page: 1, limit: 10 });
const totalRecords = ref(0);
const getList = async () => {
  const { page, limit } = currentPage;
  const list = await axios.get("/getOrderList?user_id=" + userid+`&limit=${limit}&page=${page}`);
  game_list.value = list.data.data
  totalRecords.value = list.data.total; 
  console.log(game_list);
};
// getList();
const handlePageChange = (newPage) => {
    currentPage.page = newPage;
    getList();
};

const password = ref("");
const set_password = ref("");
const visible = ref(false);
const visible_setPwd = ref(false);
const is_show = ref(false);

// 判断是否设置安全码，弹出设置安全码
if(user_info.password == null || user_info.password == ''){
  visible_setPwd.value = true
}else{
  visible.value = true
}

const handleClose_pwd = () => {
  // visible_setPwd.value = false;
  // set_password.value = "";
  // visible.value = true;
  router.go(-1)
};

const validatePassword = (password) => {
  var regex = /^\d{6}$/;
  return regex.test(password);
}
const handleSubmit = () => {
  if (password.value) {
    getOrder();
  } else {
    if(lang.value == 'en'){
      ElMessage.error("Please fill in 6 as the digital security code");
    }else{
      ElMessage.error("請填寫6位数字安全碼");
    }
   
  }
};

const handleSubmit_setPWd = () => {
  if (validatePassword(set_password.value)) {
    setPwd();
  } else {
    if(lang.value == 'en'){
      ElMessage.error("Please fill in the set security code");
    }else{
      ElMessage.error("請填寫設定的安全碼");
    }
    
  }
};

const getOrder = async () => {
  const info = {
    user_id:user_info.id,
    wallet_password:password.value,
  }
  const data = await axios.post('/password_verify',info)
  console.log(data);
  if (data.code == 200) {
    visible.value = false;
    if(lang.value == 'en'){
      ElMessage.success("Password verification successful");
    }else{
      ElMessage.success('密碼驗證成功');
    }
    
    getList();
    is_show.value = true;
  } else if (data.code == 9005) {
    if(lang.value == 'en'){
      ElMessage.warning("Security password has not been set yet");
    }else{
      ElMessage.warning('還未設置安全密碼');
    }
    
    visible.value = false;
    password.value = "";
    visible_setPwd.value = true;
  }else if (data.code == 9001) {
    if(lang.value == 'en'){
      ElMessage.error("password incorrect");
    }else{
      ElMessage.error("安全密碼錯誤");
    }
  } else {
    ElMessage.error(data.message);
  }
};

const getUserInfo = async () =>{
    const data = {
        user_id:user_info.id,
    }
    const list = await axios.post('/getUserInfo',data)
    user_info.value = list.data
    user_infoStore.setUserinfo(list.data.user_info)
}

const setPwd = async () => {
  const info = {
    user_id: user_info.id,
    wallet_password: set_password.value,
  };
  const data = await axios.post("/setWalletPassword", info);
  console.log(data);
  if (data.code == 200) {
    visible_setPwd.value = false;
    set_password.value = "";
    visible.value = true;
    getUserInfo()
    if(lang.value == 'en'){
      ElMessage.success('Password set successfully');
    }else{
      ElMessage.success('密碼設定成功');
    }
  } else {
    ElMessage.error(data.message);
  }
};

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
  lang.value = 'en'
}else{
  lang.value = 'zh'
}

watchEffect(() => {
    let value = set_password.value;
    let numericValue = value.replace(/\D/g, ''); // 移除非数字字符

    if (value !== numericValue) {
        set_password.value = numericValue; // 只更新如果有变化
    }

    let value2 = password.value;
    let numericValue2 = value2.replace(/\D/g, ''); // 移除非数字字符

    if (value2 !== numericValue2) {
      password.value = numericValue2; // 只更新如果有变化
    }
});
</script>

<style lang="less" scoped>
.pagination{
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    right: 15px;
}
.recharge_title {
  font-size: 25px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
  text-align: center;
}
.recharge_content {
  min-height: 502px;
  .title,
  .main_line {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    span {
      flex: 1;
      text-align: center;
    }
  }
  .main_line:last-child {
    border-bottom: none;
  }
}

/* 模态框样式 */
.modal-overlay,
.modal-setPwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-setPwd {
  z-index: 1001 !important;
}

.modal {
  background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  width: 320px;
  text-align: center;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-direction: column;
  p{
    font-size: 13px;
    margin-top: 10px;
    color: #878787;
  }
}

.modal-header h3 {
  margin: 0;
  font-size: 24px;
  color: #3c4043;
  font-family: "Roboto", sans-serif;
}

.close-button1 {
  background: none;
  border: none;
  font-size: 28px;
  color: #9aa0a6;
  cursor: pointer;
  transition: color 0.3s ease;
  position: absolute;
  right: 20px;
  top: 5px;
}

.close-button1:hover {
  color: #1a73e8;
}

.modal-body {
  margin-bottom: 20px;
}

.modal-body label {
  display: block;
  font-size: 16px;
  color: #3c4043;
  margin-bottom: 5px;
  font-family: "Roboto", sans-serif;
}

.modal-body input {
  width: 90%;
  padding: 10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

.modal-footer {
  display: flex;
  justify-content: space-around;
}

.modal-footer p {
  // margin-left: 10px;
  padding: 0;
  width: 48%;
  height:40px;
  line-height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
  margin-right: 0;
  background-color: @primary-color;
  color: white;
}

.modal-footer .cancel-button {
  background-color: #f5f5f5;
  color: #3c4043;
}

.modal-footer .cancel-button:hover {
  background-color: #ebebeb;
}

.modal-footer .confirm-button {
  background-color: #1890ff;
  color: #fff;
}

.modal-footer .confirm-button:hover {
  background-color: #5cb0ff;
}
</style>
